<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>捎话</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style>
        body{
            position: relative;
            /*left: 0;*/
            /*right: 0;*/
            /*top: 0;*/
            /*bottom: 0;*/
            /*min-height: 500px;*/
        }
        .l-footer{
            position: absolute;
            /*bottom: -70px;*/
            padding-bottom: 10px;
        }
        .cleanw{
            /*position: absolute;*/
            /*top: -22px;*/
            background: #eee;
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            border-radius: 16px;
            left: 14px;
            cursor: pointer;
        }
        .em-text{
            font-family: PingFang-SC;
            font-size: 14px;
            line-height: 24px;
            text-align: justify;
            color: #9ea7b1;
            /*width: 90%;*/
            margin: 0 auto;
            margin-top: 26px;
        }
        .l-footer{
            position: absolute;
        }
        .f-che{
            display: none;
        }
        .f-che+label{
            display: inline-block;
            padding: 3px 5px;
            border: 1px solid #e1e1e1;
            color: #9e9e9e;
            border-radius: 7px;
            width: 100%;
        }
        .f-che:checked+label{
            border: 1px solid #666666;
            color: #666;
        }
        .take-ul{
            padding: 10px;
            text-align: center;
        }
        .take-ul:after,.take-ul:before{
            content: '';
            display: block;
            clear: both;
        }
        .take-ul>li{
            padding-right: 10px;
            width: 30%;
            display: inline-block;
        }
        .input{
            width: 100%;
            background: #eee;
            border: 1px solid #ababab;
            border-radius: 5px;
            padding: 3px 5px;
            color: #808080;
        }
       .input[disabled]{
           background: #eee;
       }
        .take-tab{
            text-align: center;
            -moz-box-shadow: 0px 1px 3px #333333;
            -webkit-box-shadow: 0px 1px 3px #333333;
            box-shadow: 0px 1px 3px #333333;
            margin-bottom: 5px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            padding: 0 10px;
        }
        .take-tab>div{
            float: left;
            /* width: 30px; */
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            width: auto;
        }
        .take-tab>div.take-queren{
            float: right;
            cursor: pointer;
        }
        .f-cleboth:after, .f-cleboth:before{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div>
    <div class="take-tab f-cleboth" style="background: #fff;">
        <div class="cleanw" style="width: 30px;background: #fff;"><</div>
        <span>捎话</span>
        <div class="take-queren">确认</div>
    </div>

</div>
<div>
    <ul class="take-ul f-cleboth" id="take-ul">
        <li>
            <input type="checkbox" class="f-che" id="1" value="比较急">
            <label for="1">比较急</label>
        </li>
        <li>
            <input type="checkbox" class="f-che" id="2">
            <label for="2">比较急</label>
        </li>
    </ul>
</div>
<div style="padding: 0 10px;">
    <input type="text" class="input" id="takeMsgText" disabled style="width: 100%;">
</div>


</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script>
    jQuery(document).ready(function($) {
        var $document = $(document);
        var yun=new yueajax( "${openId}");
        //数据初始化
        (function(){
            var msg=['比较急','行李多','五星好评','线上支付','打车往返','现金支付'];
            var selMsg=getQueryString('msg');
            var html='';
            for(var i =0;i<msg.length;i++){
                html+=' <li>'+
                        '<input type="checkbox" class="f-che" id="msgnum'+i+'" value="'+msg[i]+'">'+
                        '<label for="msgnum'+i+'">+ '+msg[i]+'</label>'+
                        '</li>'
            }
            $('#take-ul').html(html);
            selMsg=(selMsg!=''?selMsg.split(','):'');
            for(var y=0;y<selMsg.length;y++){
                $('[value="'+selMsg[y]+'"]+label').click();
            }
            $('#takeMsgText').val(getQueryString('msg'))
        })()

        $document.on('change','.f-che',function(){
            var arr=[];
            $('.f-che:checked').each(function(key,value){
                var c=$(this).val();
                arr.push(c);
            });
            $('#takeMsgText').val(arr.join(','))
        })
        $document.on('touchend','.take-queren',function(){
            window.top.$('#oralMessageSpan').html($('#takeMsgText').val()|| '捎话')
            window.top.$('#oralMessageSpan').data('msg',$('#takeMsgText').val()|| '')
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        })
//        关闭
        $document.on('touchend','.cleanw',function (event) {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        })
    });
</script>
</html>
